<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
</head>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }

    #app {
        width: 94%;
        margin-left: 2%;
        text-align-last: center;
    }
</style>

<body>
    <div id="app">
        <div v-show="table1">
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);margin-left: -40%;">到货情况</h1>
                </el-col>
            </el-row>
            <el-table :data="tableData" border style="width: 100%;height: 330px;">
                <el-table-column prop="requestBuyer" label="采购单编号" >
                </el-table-column>
                <el-table-column prop="requestBuyer" label="采购申请人" >
                </el-table-column>
                <el-table-column prop="storeCheckPerson" label="审核人" >
                </el-table-column>
                <el-table-column prop="reachTime" label="到货日期" >
                    <template slot-scope="scope">
                        {{ new Date(scope.row.reachTime).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column label="采购详情" >
                    <template slot-scope="scope">
                        <el-button @click="details(scope.$index,tableData)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 15, 20, 25]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
            <div v-show="table2">
                <el-row :gutter="20">
                    <el-col :span="12" :offset="8">
                        <h1 style="color: rgb(78, 78, 250);margin-left: -40%;">采购详情</h1>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        申请人：{{requestBuyer}}
                    </el-col>
                    <el-col :span="6" :offset="2">
                        申请日期：{{new Date(requestTime).toLocaleDateString()}}
                    </el-col>
                    <el-col :span="6" :offset="2">

                    </el-col>
                    <el-col style="margin-left: 30%" :span="2">
                        <el-button @click="back" type="text" size="medium">返回</el-button>
                    </el-col>
                </el-row>
                <el-table :data="tableData3"  border style="width: 100%;height: 330px;">
                    <el-table-column prop="partcode" label="零件编号" >
                    </el-table-column>
                    <el-table-column prop="partname" label="零件名称" >
                    </el-table-column>
                    <el-table-column prop="partplacecode" label="货位号" >
                    </el-table-column>
                    <el-table-column prop="partunit" label="单位" >
                    </el-table-column>
                    <el-table-column prop="producername" label="生产商" >
                    </el-table-column>
                    <el-table-column prop="buycount" label="采购数量" >
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            id: 0,
            page: 1,
            limit: 5,
            total: 0,
            currentPage1: 1,
            tableData: [],
            tableData3: [],
            table1: true,
            table2: false,
            status: 0,
            tableIndex: 0,
            requestBuyer: '',
            requestTime: '',
        },
        methods: {
            select() {
                let _this = this;
                selectAjax("post", '/buytable/list_aog', { page: _this.page, limit: _this.limit }, _this.tableData2);
            },
            selectDetails() {
                let _this = this;
                selectAjax("post", '/buytable/details_aog', { id: _this.id, page: _this.page, limit: _this.limit }, _this.tableData4);
            },
            tableData2(data) {
                this.tableData = data.data.data;
                this.total = data.data.total;
            },
            tableData4(data) {
                this.tableData3 = data.data.data;
                this.total = data.data.total;
            },
            details(i,data){
                this.requestBuyer = data[i].requestBuyer;
                this.requestTime = data[i].requestTime;
                this.id = data[i].id;
                this.closePage();
                this.table1 = false;
                this.table2 = true;

                this.selectDetails();
            },
            handleSizeChange(val) {
                this.limit = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                }
            },
            handleCurrentChange(val) {
                this.page = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                }
            },
            closePage() {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
            },
            back() {
                this.status = 0;
                this.table1 = true;
                this.table2 = false;
                this.select();
                this.closePage();
            },


        },
        mounted() {
            this.select();
        }
    })
</script>

</html>